<template>
  <div class="baseDiv">
    <el-card class="box-card">
      <div slot="header" align="center">
        <h2>用户信息</h2>
      </div>
      <div>
        <el-form :model="user" status-icon  :rules="rules" ref="userForm" label-width="100px" style="margin-right: 15%;margin-left: 10%" class="demo-user" >
          <el-form-item label="账号"  disabled="disabled" >
            <el-input disabled v-model="user.username" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input  style="width: 10%" v-model="user.age" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="name" >
            <el-input  v-model="user.name" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" >
            <el-input type="email" disabled v-model="user.email" autocomplete="off" class="input"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex" >
            <el-radio-group v-model="user.sex">
              <el-radio :label=0 border>女</el-radio>
              <el-radio :label=1 border>男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="transform: translateX(35%)">
            <el-button type="primary" @click="updateUser('userForm')" >修改</el-button>
            <el-button @click="resetForm('userForm')" >重置</el-button>
          </el-form-item>
        </el-form>
        
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "personData",
  data(){
    //判断修改
    let judgeSex = (rule, value, callback) => {//账号的实时输入
      value = value+"";
      if(value === ''){
        callback(new Error('请输入要修改的年龄'));
      }else{
        let codeReg = new RegExp("[0-9]"), //正则 英文+数字；
            len=value.length,
            str='';
        console.log(len)
        for(let i=0;i<len;i++){
          if(codeReg.test(value[i])){
            str+=value[i];
          }
        }
        if(str.length !== len){
          this.user.age='';
          callback(new Error('请输入数字!'));
        }else{
            //判定满足条件的注册
          callback();
        }
      }

    };
    return{
      user:{},
      rules: {
        age: [
          {validator: judgeSex, trigger: ['blur'], required: true }
        ],
        name: [
          {min: 1, max: 9, message: '昵称不能为空!', trigger: 'blur',required: true}
        ],
      },
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //一开始展示用户的信息
    getUserInfo(){
      this.$http.post('/user/findOneById/' + this.$store.state.userId).then(resp => {
        if (resp.flag) {
          this.user =resp.data;
        } else {
          this.$message.success("用户信息查询失败");
        }
      })
    },
    //重置表单
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.getUserInfo();
    },
    //更新用户数据
    updateUser(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/user/updateUser',this.user).then(resp => {
            if (resp.flag) {
              this.$message.success("用户信息修改成功");
              this.$store.state.name=resp.data.name;
            } else {
              this.$message.success("用户信息更新失败");
            }
          })
        } else {
          this.$message.info("检查更新的格式不正确!")
        }
      });

    }
  }
}
</script>
<style scoped>
.baseDiv {
  width: 80%;
  height: 100%;
  transform: translateX(20%);
}
.el-card {
  margin-top: 2%;
  width: 80%;
}
</style>